<template>
  <el-menu
    class="my-side"
    :default-active="$route.path"
    @open="spread"
    @close="fold"
    background-color="#545c64"
    text-color="#fff"
    :router="true"
  >
    <el-menu-item index="/home">
      <i class="el-icon-s-home"></i>
      <span slot="title">主页概览</span>
    </el-menu-item>
    <el-menu-item index="/home/dataCenter">
      <i class="el-icon-s-data"></i>
      <span slot="title">数据中心</span>
    </el-menu-item>
    <el-menu-item index="/home/manageCenter">
      <i class="el-icon-s-management"></i>
      <span slot="title">管理中心</span>
    </el-menu-item>
    <el-menu-item index="/home/messageCenter">
      <i class="el-icon-message-solid"></i>
      <span slot="title">消息中心</span>
    </el-menu-item>
    <el-menu-item index="/home/logRecord">
      <i class="el-icon-s-order"></i>
      <span slot="title">日志记录</span>
    </el-menu-item>
    <el-menu-item index="/home/user">
      <i class="el-icon-user-solid"></i>
      <span slot="title">待定项</span>
    </el-menu-item>
  </el-menu>
</template>
<script>
export default {
  name: "mySide",
  data() {
    return {};
  },
  methods: {
    spread(key, keyPath) {
      console.log(key, keyPath);
    },
    fold(key, keyPath) {
      console.log(key, keyPath);
    },
  },
};
</script>
<style lang="scss" scoped>
.el-menu-item.is-active{
  color: $theme-color;
}
.my-side {
  width: 200px;
}
</style>